<template>
	<view class="content">
		<h3>手机快捷登录</h3>
		<view class="main">
			<u--form labelPosition="left" :errorType="errorType" :model="datalist" :rules="rules" ref="uForm">
				<u-form-item prop="userInfo.phone" borderBottom ref="item1">
					<u--input placeholder="请输入手机号" type="number" v-model="datalist.userInfo.phone" border="none">
					</u--input>
				</u-form-item>
				<u-form-item prop="userInfo.yanzhengma" borderBottom ref="item1">
					<view class="s">
						<u--input placeholder="请输入验证码" type="number" v-model="datalist.userInfo.yanzhengma"
							border="none">获取验证码</u--input>
						<view class="input_butt">
							<u-code ref="uCode" @change="codeChange" seconds="50" changeText="X秒重新获取"></u-code>
							<u-button @tap="getCode(datalist.userInfo.phone)" :text="tips" type="success"
								color="linear-gradient(to right, rgb(66, 83, 216), rgb(213, 51, 186))" size="small">
							</u-button>
						</view>
					</view>
				</u-form-item>


				<button class="butts" @click="submit(datalist.userInfo.phone)">店铺登录</button>
				<button class="buttt" @click="gethref">申请店铺入住</button>
			</u--form>
			<view class="zises">
				<span class="iconfont">&#xe8cd;</span>全国服务电话<text class="textst"
					@click="goPhoneBtn(dianhua)">{{dianhua}}</text>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				errorType: 'none',
				tips: '获取验证码',
				dianhua: "18796301100",
				datalist: {
					userInfo: {
						phone: '',
						yanzhengma: ''
					}
				},


				rules: {
					'userInfo.phone': [{
							required: true,
							message: '请输入手机号',
							trigger: ['change', 'blur'],
						},
						{
							validator: (rule, value, callback) => {
								return uni.$u.test.mobile(value);
							},
							message: '手机号码不正确',
							min: 11,
							max: 11,
							// 触发器可以同时用blur和change
							trigger: ['change', 'blur'],
						}
					],
					'userInfo.yanzhengma': {
						type: 'string',
						required: true,
						len: 6,
						message: '请填写6位验证码',
						trigger: ['change', 'blur']
					}
				}
			}
		},
		onLoad() {
			uni.setStorageSync('first_falg', true);
			this.logPhone()
		},
		
		onShow() {
			uni.getStorage({
				key: 'storage_key',
				success: function (res) {
					console.log("**************");
					console.log(res.data.userInfo.phone);
					console.log("**************");
					if(res.data.userInfo.phone != 0){
						uni.navigateTo({
							url: '../../usermin/usermin?phone=' + res.data.userInfo.phone,
							fail: (res) => {
								console.log(res) //打印错误信息
							}
						});
					}
				}
			});
		},
		methods: {

			logPhone() {
				// http://xie.sdjunchen.com/index/api.index/service_call
				this.$http.getservice_call().then(res => {
					this.dianhua = res.data
				})
			},

			submit(phone) {
				this.$refs.uForm.validate().then(res => {
					// 带参数
					this.$http.postlog(this.datalist)
						.then(res => {
							console.log(res)
							uni.$u.toast(res.info)
							if (res.code == 0) {
								
								uni.setStorage({
									key: 'storage_key',
									data: this.datalist,
									success: function () {
										console.log('success');
									}
								});
								
								uni.navigateTo({
									url: '../../usermin/usermin?phone=' + phone,
									fail: (res) => {
										console.log(res) //打印错误信息
									}
								});
								console.log('if判断');
							} else {
								console.log('else判断');
							}
						})


				}).catch(errors => {
					console.log("A我下面的");
					console.log(errors[0].message);
					uni.$u.toast(errors[0].message)
				})

			},
			codeChange(text) {
				this.tips = text;
			},
			getCode(phone) {

				let data = {
					phone: phone
				}
				this.$http.getphone(data)
					.then(res => {
						console.log(data);
						console.log(res.code);
						uni.$u.toast(res.info)
						if (res.code != 0) {
							if (this.$refs.uCode.canGetCode) {
								console.log(phone);
								uni.showLoading({
									title: '正在获取验证码'
								})
								setTimeout(() => {
									uni.hideLoading();
									uni.request({
										url: 'http://xie.sdjunchen.com/index/api.sms/send?phone=' +
											phone,
										method: 'POST',
										success: res => {
											console.log("返回的信息：" + res.data);
											uni.$u.toast(res.data.data);
											// 通知验证码组件内部开始倒计时
											this.$refs.uCode.start();
										},
										fail: () => {
											uni.$u.toast('请求失败');
											console.log('请求失败');
										},
										complete: () => {
											console.log('请求完成');
										}
									})
								}, 2000);
							} else {
								uni.$u.toast('倒计时结束后再发送');
							}
						}
					})


			},
			change(e) {
				console.log('change', e);
			},
			goPhoneBtn(val) {
				console.log("电话" + val);
				uni.makePhoneCall({
					// 手机号
					phoneNumber: val,
					success: (res) => {
						console.log(res);
					},
					fail: (res) => {
						console.log(res);
					},

				});
			},
			gethref() {
				uni.navigateTo({
					url: '../../ruzhu/ruzhu',
					fail: (res) => {
						console.log(res) //打印错误信息
					}
				});
			},


		}
	}
</script>


<style>
	@font-face {
		font-family: 'iconfont';
		/* Project id 3183672 */
		src: url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.woff2?t=1647581154547') format('woff2'),
			url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.woff?t=1647581154547') format('woff'),
			url('//at.alicdn.com/t/font_3183672_bvb1ihrvzk.ttf?t=1647581154547') format('truetype');
	}

	.iconfont {
		font-family: "iconfont" !important;
		font-size: 18px;
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-webkit-text-stroke-width: 0.2px;
		-moz-osx-font-smoothing: grayscale;
		margin-right: 10px;
		color: #000;
	}
</style>

<style scoped>
	.content {
		background-color: #FFFFFF;
	}

	.main {
		padding: 0 20px 0 20px;
	}

	h3 {
		font-size: 20px;
		margin-top: 20px;
		margin-left: 20px;
		margin-bottom: 20px;
		font-weight: 550;
	}

	.butts {
		background-color: #fff;
		margin-top: 30px;
		border: 1px solid #000;
		border-radius: 30px;
		font-size: 15px;
		line-height: 50px;
		font-weight: 500;
	}

	.buttt {
		background-color: #000000;
		margin-top: 20px;
		border: 1px solid #000;
		border-radius: 30px;
		font-size: 15px;
		color: #ffad42;
		line-height: 50px;
	}

	.input_butt {
		width: 80px;
		display: flex;
		justify-content: center;
	}

	.s {
		display: flex;
		justify-content: space-between;
	}

	.textst {
		text-decoration: underline;
		margin-left: 5px;
	}

	.zises {
		padding-top: 50px;
		display: flex;
		justify-content: center;
	}
</style>
